<template>
	<div class="slider-verify-box" v-if="isShow">
		<div class="verifyBox">
			<div class="slider-title">图形验证</div>
			<div class="slide-content">
				<div class="slide-tips">拖动下方滑块完成拼图</div>
				<div class="slider-pintu" v-loading="loading">
					<el-image id="pintuImg" :src="pintuImg" class="pintu"></el-image>

					<div class="pintukuai" :style="{ top: top + 'px', left: oldx + '%', width: pintukuaiScale + 'px', height: pintukuaiScale + 'px' }">
						<!-- <image :src="pintukuai" :style="{width: pintukuaiScale + 'px', height: pintukuaiScale + 'px' }"></image> -->
            <el-image :src="pintukuai" :style="{width: pintukuaiScale + 'px', height: pintukuaiScale + 'px' }" class="image"/></el-image>
					</div>
				</div>

				<div class="slider-movearea" @touchend="endTouchMove">
					<!-- <movable-area :animation="true"><movable-view :x="x" direction="horizontal" @change="startMove"></movable-view></movable-area> -->
          <el-slider v-model="oldx" :show-tooltip="false" @change="endTouchMove"></el-slider>
					<div class="huadao" :class="err?'err':''">{{err?'请把拼图滑动到对应位置':'拖动左边滑块完成上方拼图'}}</div>
				</div>
			</div>

			<div class="slider-btn-group">
				<div class="slider-btn" @click="closeSlider">关闭</div>
				<div class="slider-btn slide-btn-refresh" @click="refreshVerify">刷新</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'slider-verify',
	props: {
		isShow: true,
		pintuImg: '',	//拼图src
		pintukuai: '',	//拼图块src
		ynumber: 0,
    err: false //错误状态
	},
	data() {
		return {
			x: 0, //初始距离
			oldx: 0, //移动的距离
			top: 0, //拼图的top距离
			scale: 0 ,//图片缩放比例
			pintukuaiScale: 0, //拼图块缩放尺寸
      loading: false,
      tips: '拖动左边滑块完成上方拼图'
		};
	},
	watch: {
		// 每次打开重新刷新拼图
		isShow(newValue, oldValue) {
			if(newValue){
				//拼图原尺寸640*360，拼图块原尺寸为104*104
				this.scale = 0.5
				this.top = this.ynumber * this.scale
				this.pintukuaiScale = 104 * this.scale
        this.resetMove();	//重置阴影位置
			}
		},
		ynumber(newValue, oldValue){
			if(newValue){
				this.scale = 0.5
				this.top = this.ynumber * this.scale
			}
		}
	},
	methods: {
		//刷新验证
		refreshVerify() {
      // this.err = false
			this.$emit('refresh', false);
			this.resetMove();	//重置阴影位置
		},

		/* 滑动中 */
		startMove(e) {
			this.oldx = e;
		},

		/* 滑动结束 */
		endTouchMove() {
			this.$emit('touchSliderResult', this.oldx*640/100);
      this.loading = true
      // this.resetMove()
		},

		/* 重置阴影位置 */
		resetMove() {
      this.loading = false
			this.oldx = 0;
		},

		// 关闭
		closeSlider(){
			this.$emit('close', false);
		}
	}
};
</script>

<style lang="scss">
.slider-verify-box {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 999;
}
.verifyBox {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	// width: 85%;
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 0 0 2px rgba(0, 0, 0);

	.slider-title {
		font-size: 18px;
		text-align: center;
		padding: 1em 0;
		color: rgba(2, 20, 33, 0.85);
		border-bottom: 1px solid rgba(2, 20, 33, 0.15);
	}

	.slide-content {
		width: 320px;
		padding: 0 1em;
		margin: 0 auto;
		.slide-tips {
			font-size: 14px;
			color: rgba(2, 20, 33, 0.45);
			padding: 0.5em 0;
		}

		.slider-pintu {
			position: relative;
			width: 100%;
			border-radius: 10rpx;
			overflow: hidden;
			.pintu {
				width: 320px;
				height: 180px;
				display: block;
				margin: 0 auto;
			}

			.pintukuai {
				position: absolute;
				top: 0;
				left: 0;
				width: 50px;
				height: 50px;
				z-index: 100;
				// box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
				overflow: hidden;

				.image {
					display: block;
					position: absolute;
					top: 0;
					left: 0;
					width: 50px;
					height: 50px;
				}
			}
		}
	}
}

.slider-movearea {
	position: relative;
	height: 40px;
	width: 100%;
	margin: 14px auto;
  box-sizing: border-box;
  padding: 0 16px;

	.el-slider {
		height: 40px;
		width: 100%;
    .el-slider__button-wrapper{
      .el-slider__button {
      	width: 36px;
      	height: 36px;
      	border-radius: 50%;
      	background-color: var(--main);
      	background-image: url(../../static/images/slider-verify/icon-button-normal.png);
      	background-repeat: no-repeat;
      	background-size: auto 15px;
      	background-position: center;
      	position: relative;
      	z-index: 100;
        top: -2px;
      }
    }
	}
}

.huadao {
	width: 100%;
	height: 33px;
	line-height: 33px;
	background: #eee;
	box-shadow: inset 0 0 2px #ccc;
	border-radius: 20px;
	color: #999;
	text-align: center;
	box-sizing: border-box;
	position: absolute;
	top: 3px;
	left: 0;
	font-size: 14px;
	z-index: 99;
  &.err{
    background-color: #fef0f0;
    border-color: #fde2e2;
    color: #f56c6c;
  }
}

.slider-btn-group{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	border-top: 1px solid rgba(2, 20, 33, 0.15);
  font-size: 16px;
	.slider-btn{
		flex: 1;
		height: 50px;
		line-height: 50px;
		text-align: center;
		color:rgba(2,20,33,0.85);
    cursor: pointer;
		&:active{
			opacity: 0.8;
		}
	}
	.slide-btn-refresh{
		color:var(--main);
		border-left: 1px solid rgba(2, 20, 33, 0.15);
	}
}
</style>
